<!--
@name:scaleSettingDialog
@author:Zhenglei
@date:15:29
@description:scaleSettingDialog
@update:2022/7/1315:29
-->
<template>
  <el-dialog title="关联主题"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="50%">
    <el-form :model="detailData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="关联主题：" prop="dolThemeId">
        <el-select v-model="detailData.dolThemeId"
                   filterable
                   class="w-300"
                   placeholder="请选择主题">
          <el-option v-for="item in themeDataSource"
                     :key="item.id"
                     :label="item.dolThemeName"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否必填：" class="is-required">
        <el-radio-group v-model="detailData.isMust">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <p align="center">
      <el-button @click="modalClose"
                 type="info">取 消
      </el-button>
      <el-button type="primary"
                 v-prevent-re-click
                 @click="handleSave()">保 存
      </el-button>
    </p>

  </el-dialog>
</template>

<script>
export default {
  name: "scaleSettingDialog",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    },
    listData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loading: false,
      detailData: {
        dolThemeId: '',
        isMust: 0,
      },
      themeDataSource: [],
      formModelRules: {
        dolThemeId: [{required: true, message: '请选择主题', trigger: 'change'},],
      }

    }
  },
  created() {
    this.searchDolTheme()
  },
  methods: {

    //查询主题
    searchDolTheme() {
      this.post(this.api.healthMap.searchDolTheme, {
        useType: 2
      }).then((res) => {
        if (res.data.code === '200') {
          this.themeDataSource = res.data.object
        }
      })
    },

    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    handleSave() {
      this.$refs.formModelRef.validate(valid => {
        if (valid) {
          this.post(this.api.healthMap.addDolScale, this.detailData).then((res) => {
            if (res.data.code === '200') {
              this.$message.success('新增成功')
              this.$parent.getList()
              this.modalClose()
            }
          })

        }
      })
    }
  },
}
</script>

<style scoped>

</style>
